<template>
  <div class="home">
    <div class="main-swiper">
      <swiper :options="swiperOption">
        <swiper-slide>
          <img class="w-100" src="//ossweb-img.qq.com/upload/adw/image/20190812/562a0c365019a0947a95a3358a99c705.jpeg" alt>
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="../assets/images/210794580bb9303653804bb7b482f2a4.jpeg" alt>
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="//ossweb-img.qq.com/upload/adw/image/20190812/11c8761a8e6103b4c6e0604bb73ffdc0.jpeg" alt>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"/>
      </swiper>
    </div>
    <!-- end of swiper -->
    <div class="nav-icons border-topbottom " >
      <div class=" flex-wrap" v-show="isiconnav">
        <div class="nav-item " v-for="n in 10" :key="n">
          <i class=" icon  iconfont iconchuanchengxing"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light ">
        <i class="iconfont iconshequ"></i>
        <span @click="isiconnav=!isiconnav">{{isiconnav?'收起':'展开'}}</span>
      </div>
    </div>
    <!-- end of nav icons -->
  <list-card icon="iconRM_ICON_1" title="新闻资讯" :categories="newsCats" >
    <template #items="{category}">
      <router-link
        tag="div"
        :to="`/articles/${news._id}`"
        class="acticles"
        v-for="(news, i) in category.newsList" :key="i">
        <span class="text-info">[{{news.categoryName}}]</span>
        <span class="px-2">|</span>
        <span class="title  "      ref="acticles"
              >{{news.title}}</span>
        <span class="text-grey-1 ">{{news.createdAt | date}}</span>
      </router-link>
    </template>
  </list-card>
    <!-- end of 新闻资讯 -->
    <list-card icon=".iconArtifact-yingxiong" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="hero-list">
          <router-link class="heroitem"
            tag="div"
            :to="`/heroes/${hero._id}`"
          v-for="(hero, i) in category.heroList" :key="i">
            <img :src="hero.avatar" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>

        </div>

      </template>
    </list-card>
  </div>
</template>

<script>
import ListCard from '../components/common/ListCard.vue'
import dayjs from 'dayjs'
export default {
  name: 'home',
  filters: {
    date (val) {
      return dayjs(val).format('MM/DD')
    }
  },
  components: { ListCard },
  data () {
    return {
      swiperOption: {
        autoplay: {
          delay: 4000// 1秒切换一次
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          notNextTick: false
        }
      },
      isiconnav: true,
      newsCats: [],
      heroCats: []
    }
  },
  methods: {
    async fetchNewsCats () {
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
    },
    async fetchHeroCats () {
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
    }
  },
  created () {
    this.fetchNewsCats()
    this.fetchHeroCats()
  }
}
</script>
<style lang="scss" scoped>
  @import "../assets/styles/global";

  .home{
    .main-swiper{
      img{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
    }
    .nav-icons{
      background-color: white;
      margin-top: .25rem;
      .flex-wrap{
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        align-items: center;
       .nav-item{
         width: 24%;
         height: 1rem;
         margin: .3rem  0;
         text-align: center;
         border-right: 1px solid #cccccc;
         &:nth-child(4n) {
           border-right: none;
         }
         .icon{
           font-size: .5rem;
         }
         .py-2{
           margin-top: .2rem;
         }
       }
      }
      .bg-light{
        height: .6rem;
        line-height: .6rem;
        background: #f9f9f9;
        text-align: center;
        bottom: 0;
        width: 100%;
        font-size: .24rem;
      }
    }
    .acticles{
      display: flex;
      height: .38rem;
      line-height: .38rem;
      margin-bottom: .3rem;
      font-size: .28rem;
      .text-info{
        color: #464f73;
      }
      .px-2{
        padding: 0 .2rem;
      }
      .title{
        flex: 1;
        @include ellipsis
      }
      .text-grey-1{

      }
    }
    .hero-list{
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      margin-right: -.1rem;
      margin-left: -.1rem;
      .heroitem{
        width: 20%;
        text-align: center;
        .w-100{
          width: 78%;
          border-radius: 2px;
        }
      }
    }

  }

</style>
